<template>
  <el-row class="tac" style="height: 100%;">
    <el-menu class="el-menu-vertical-demo" style="height: 100%;" :default-active=active background-color="#344154" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="1"  @click="click_to('home', '1')" >
        <span slot="title" style="font-size: large" >首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <span style="font-size: large">资料信息</span>
        </template>
        <el-menu-item index="2-1" style="padding-left:80px" @click="click_to('user', '2-1')">用户信息</el-menu-item>
        <el-menu-item index="2-2" style="padding-left:80px" @click="click_to('food', '2-2')">食品信息</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <span style="font-size: large">订单信息录入</span>
        </template>
        <el-menu-item index="3-1" style="padding-left:80px" @click="click_to('producers', '3-1')">生产页面</el-menu-item>
        <el-menu-item index="3-2" style="padding-left:80px" @click="click_to('bidders', '3-2')" >收购页面</el-menu-item>
        <el-menu-item index="3-3" style="padding-left:80px" @click="click_to('shippers', '3-3')" >运输页面</el-menu-item>
        <el-menu-item index="3-4" style="padding-left:80px" @click="click_to('sellers', '3-4')">销售页面</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-row>

</template>

<script>
export default {
  name: "Navigator",
  data() {
    return {
      post_role:0,
      active:"1"
    }
  },
  mounted() {
    this.set_user_info()
  },
  methods: {
    set_user_info(){
      this.username = this.$cookies.get('username')
      this.post_role = this.$cookies.get('role')
      this.active = this.$cookies.get('active')
    },
    click_to(url, thisActive) {
      this.$router.push(url)
      this.active = thisActive
      this.$cookies.set("active", this.active)
    }
  }
}
</script>

<style scoped>

</style>